<template>
  <div class="user-container">
    <Header />
    <!-- 用户信息区域 -->
    <UserInfo :userInfo="userInfo" :isFollow="isFollow" @click="handleFollowUpdate" />
    <!-- 作品列表区域 -->
    <VideoInfo :postList="postList" :collectList="collectList" :likeList="likeList" />
  </div>
</template>

<script setup>
import Header from './components/Header.vue'
import UserInfo from './components/UserInfo.vue'
import VideoInfo from './components/VideoInfo.vue'
import { userApi } from '@/api/user'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import useVideoList from './hooks/useVideoList'
const route = useRoute()

const userInfo = ref({})
const isFollow = ref(false)

const { postList, collectList, likeList, fetchList } = useVideoList()
const getUserInfo = async () => {
  const res = await userApi.getOtherUserInfo(route.params.id)
  userInfo.value = res.user
  isFollow.value = res.isFollow
}

const handleFollowUpdate = async () => {
  try {
    await new Promise((resolve) => setTimeout(resolve, 100))
    await getUserInfo()
  } catch (error) {
    console.error(error)
  }
}

onMounted(async () => {
  await Promise.all([getUserInfo(), fetchList(route.params.id)])
})
</script>

<style scoped>
.user-container {
  flex: 1;
  background-color: var(--container-background-color);
}
</style>
